import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Tabs, List, Badge, Alert }  from 'antd';
import moment from 'moment/moment';
import Trend from '../../components/Trend/index';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const { TabPane } = Tabs;
@connect(({ hot, loading }) => ({
  hot,
  loading: loading.models.hot,
}))
export default class Hot extends PureComponent{

  state = {
  };

  componentDidMount(){
    this.initTab();
    this.tabChange("实时热点");
  }

  initTab = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'hot/listType',
    });
  };

  tabChange = (activeKey) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'hot/listAll',
      payload: {
        type: activeKey,
      },
    })
  };

  render(){
    const { hot: { typeList, hotList }, loading} = this.props;
    const tabContent = typeList.map(item => {
     return (
       <TabPane tab={item} key={item} loading={loading}>
         <List
           size="small"
           itemLayout="horizontal"
           dataSource={hotList}
           renderItem={hot=> (
             <List.Item>
               <List.Item.Meta
                 avatar={<Badge count={hot.rank} style={{ background: hot.color}} />}
                 title={<a style={{color: '#40a9ff'}} href={hot.title_src} target="_bank">{hot.title}</a>}
                 description={`更新时间:${moment(hot.add_time).format('YYYY-MM-DD HH:mm:ss')}`}
               />
               <Trend flag={hot.trend}>{hot.search_count}</Trend>
             </List.Item>
           )}
         />,
       </TabPane>
     );
    });

    return (
      <PageHeaderLayout
        title="话题热点"
        content={
          <div>
            <p>紧跟话题热点，有利于提高文章曝光率.</p>
          </div>
        }
      >
        <Card bordered={false}>
          <Alert type="info" message="每30分钟重新更新数据，更新过程中会出现短暂数据缺失，10秒内恢复正常" closable showIcon />
          <Tabs defaultActiveKey="实时热点" onChange={this.tabChange}>
            { tabContent }
          </Tabs>
        </Card>
      </PageHeaderLayout>
    );
  }
}
